import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { Spin } from 'antd';
import { useTranslation } from 'react-i18next';

export default props => {
    const { chartBarData, loading } = props;
    const chartDom = useRef(null);
    const { t } = useTranslation();

    const getChartOptions = (categories, series) => ({
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            orient: 'horizontal',
            bottom: 10,
            data: [t('menu.platform.bar.operatingIncome'), t('menu.platform.bar.maxCost'), t('menu.platform.bar.profit')],
            textStyle: {
                color: '#0F1217', // 设置图例文本颜色
            },
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLine: {
                show: false,
            },
            axisLine: {
                show: false // 隐藏 X 轴线
            },
            axisTick: {
                show: false // 隐藏 X 轴刻度线
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false // 隐藏 Y 轴刻度线
            },
            splitLine: {
                show: false // 隐藏 Y 轴网格线
            }
        },
        series: series.map((item, index) => ({
            name: item.name,
            type: 'bar',
            data: item.data,
            itemStyle: {
                color: item.color
            },
        })),
    });

    useEffect(() => {
        const chart = echarts.init(chartDom.current);
        if (chartBarData && chartBarData.categories && chartBarData.series) {
            const { categories, series } = chartBarData;
            chart.setOption(getChartOptions(categories, series));
        } else {
            // 无数据时显示默认配置
            chart.setOption({
                title: {
                    text: '',
                    left: 'center',
                    top: 'middle',
                    textStyle: {
                        color: '#888',
                        fontSize: 16
                    }
                },
                xAxis: {
                    show: true
                },
                yAxis: {
                    show: true
                },
                series: [{
                    type: 'bar',
                    data: [],
                }],
                tooltip: {
                    show: false,
                }
            });
        }
        const handleResize = () => {
            chart.resize();
        };
        window.addEventListener('resize', handleResize);
        return () => {
            chart.dispose();
            window.removeEventListener('resize', handleResize);
        };
    }, [chartBarData]);

    return (
        <div style={{ position: 'relative' }}>
            <div
                ref={chartDom}
                style={{ height: 400, width: '100%' }}
            />
            {loading && (
                <Spin
                    style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                    }}
                />
            )}
        </div>
    );
};
